<template>
	<view v-if="showPopup" class="uni-popup">
		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
			<view class="uni-popup__wrapper-box" @click.stop="clear">
				<view class="uni-popup-login">

					<view class="header-tit">
						微信授权
					</view>
					<view class="explain">
						<view class="tit row">
							<view class="img">
								<image :src="OSS_HOST+'logo.png'" mode="widthFix" style="width:100% ;"></image>
							</view>
							<view class="text">
								麦麦香烘焙申请获取以下权限：
							</view>
						</view>
						<view class="mod row">
							<view class="iconfont icon">
								&#xe60a;
							</view>
							<view class="text">
								获得你的公开信息（昵称、头像等）
							</view>
						</view>
						<!-- <view class="mod row" @tap.stop="checkStatus">
							<view class="">
								<text  :class="check_status?'iconfont checkedSingle':'iconfont'">{{check_status?'&#xe61e;':'&#xe638;'}}</text>
								
							</view>
							<view class="">
								允许我们在必要场景下，合理使用您的个人信息，且阅读 并同意<text class="single-text" @tap.stop="toAgree">《小械械小程序隐私保护指引》</text>等内容
								
							</view>
						</view> -->
					</view>
					<view class="btn">
						<button type="default" class="btn-no" @click="close">拒绝</button>
						<button type="default" class="btn-yes" lang="zh_CN" @click="bindGetUserInfo">允许</button>
						<!-- <button type="default" open-type="getUserInfo" class="btn-yes" lang="zh_CN" @getuserinfo="bindGetUserInfo">允许</button> -->
					</view>

				</view>
			</view>
		</view>

		<!-- 提示弹框 -->
		<tui-tips ref="toast"></tui-tips>
	</view>
</template>

<script>
	import login from '@/utils/login.js'
	import {oss_host} from '@/config/config.js';
	export default {
		name: 'UniPopup',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: false
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				// 图片链接站点
				OSS_HOST: oss_host,
				ani: '',
				showPopup: false,
				// 图片链接站点
				//活动参数
				activity: {},
				check_status:false,
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		created() {},
		methods: {
			clear() {},
			/**
			 * 微信授权
			 */
			bindGetUserInfo(e) {
				let _this = this;
				_this.check_status = true
				// if(!_this.check_status){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请查看并勾选隐私协议'
				// 	})
				// 	return;
				// }
				uni.getUserProfile({
					desc: '展示用户信息',
					success: (file) => {
						// console.log(e)
						// console.log(file)

						//写授权方法然后写跳转
						if (file.userInfo) {
							let data = {
								nickName: file.userInfo.nickName,
								provider: 'weixin',
								encryptedData: file.encryptedData,
								iv: file.iv,
								activity: _this.activity
							}

							uni.setStorageSync('nickName', file.userInfo.nickName);
							uni.setStorageSync('avatarUrl', file.userInfo.avatarUrl);




							let status = login.auth(data)
							
							if (!status) {
								let options = {
									msg: '授权异常',
									type: 'danger'
								};
								this.$refs.toast.showTips(options);
								return;
							}
							//console.log(status)
							this.close()
							//用户按了允许授权按钮
						} else {
							//用户按了拒绝按钮
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
								confirmText: '返回授权',
								success: function(res) {

								}
							});
						}

					}
				})
			},
			checkStatus(){
				this.check_status = !this.check_status
			},
			toAgree(){
				const _this = this
				
				_this.$refer.setVilit('/packageUser/pages/my/agree/index')
				let callback = function(url) {
				    // _this.$refs.popupvLogin.open()
				}
				var data = {
				    // type: 'add'
				}
				_this.$refer.toUrl(callback, data)
			},
			/** 
			 * 微信授权
			 */

			bindGetUserInfo3(e) {
				// uni.getLocation({
				//     type: 'wgs84',
				//     success: function (res) {
				//         console.log('当前位置的经度：' + res.longitude);
				//         console.log('当前位置的纬度：' + res.address);
				//     }
				// });
				//写授权方法然后写跳转
				if (e.detail.userInfo) {
					let data = {
						nickName: e.detail.userInfo.nickName,
						provider: 'weixin',
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						activity: this.activity
					}


					let status = login.auth(data)
					if (!status) {
						let options = {
							msg: '授权异常',
							type: 'danger'
						};
						this.$refs.toast.showTips(options);
						return;
					}
					//console.log(status)
					this.close()
					//用户按了允许授权按钮
				} else {
					//用户按了拒绝按钮
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
						confirmText: '返回授权',
						success: function(res) {

						}
					});
					this.close()
				}

			},
			/**
			 * 打开方法传值
			 *@param activity  活动
			 */
			open(activity = {}) {
				//打开弹框
				this.activity = activity
				//console.log(activity)
				this.OpenPopup()
			},
			/**
			 * 打开弹框
			 */
			OpenPopup() {
				this.$emit('change', {
					show: true
				})
				this.showPopup = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'uni-' + this.type
					}, 30)
				})
			},
			/**
			 * 关闭弹框
			 */
			close(type) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
			}
		}
	}
</script>
<style lang="scss">
	@charset "UTF-8";
	.iconfont{
		font-size: 28rpx;
		padding: 0 10rpx;
	}
	
	.uni-popup {
		position: fixed;
		top: 0;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2999;
		overflow: hidden
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .4);
		opacity: 0
	}

	.uni-popup__mask.ani {
		transition: all .3s
	}

	.uni-popup__mask.uni-bottom,
	.uni-popup__mask.uni-center,
	.uni-popup__mask.uni-top {
		opacity: 1
	}

	.uni-popup__wrapper {
		position: absolute;
		z-index: 999;
		box-sizing: border-box
	}

	.uni-popup__wrapper.ani {
		transition: all .3s
	}

	.uni-popup__wrapper.top {
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%)
	}

	.uni-popup__wrapper.bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.uni-popup__wrapper.center {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0
	}

	.uni-popup__wrapper-box {
		position: relative;
		box-sizing: border-box
	}

	.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		/* padding: 30upx; */
		background: #fff
	}

	.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		position: relative;
		max-width: 80%;
		max-height: 80%;
		overflow-y: scroll;
		border-radius: 18.75rpx;
	}

	.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
	.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
		width: 100%;
		max-height: 500px;
		/* overflow-y: scroll */
	}

	.uni-popup__wrapper.uni-bottom,
	.uni-popup__wrapper.uni-top {
		transform: translateY(0)
	}

	.uni-popup__wrapper.uni-center {
		transform: scale(1);
		opacity: 1
	}

	.uni-popup-login {
		background-color: #fff;

		.header-tit {
			padding: 30rpx 0 0 30rpx;
			font-size: 40rpx;
			color: #000000;
		}

		.explain {

			.row {
				padding: 30rpx;
				display: flex;
				align-items: center;
			}

			.tit {
				border-bottom: 2rpx solid #f7f7f7;

				.img {
					width: 100rpx;
					max-height: 150rpx;
					padding-right: 30rpx;
				}

				.text {
					font-size: 32rpx;
					color: #000000;
				}
			}

			.mod {
				.icon {
					font-size: 22rpx;
					color: #ededed;
					padding-right: 30rpx;
				}

				.text {
					font-size: 32rpx;
					color: #888888;
				}
				.single-text{
					color: #2196f3;
					// font-size: 22rpx;
				}
				.checkedSingle{
					color: #1a841e;
				}
			}

		}

		.btn {
			padding: 90rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn-no {
				width: 330rpx;
				text-align: center;
				background-color: #EDEDED;
				color: #888888;
				font-size: 34rpx;
				height: 80rpx;
				line-height: 80rpx;
			}

			.btn-yes {
				width: 330rpx;
				text-align: center;
				background-color: #02C160;
				color: #FFFFFF;
				font-size: 34rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
</style>
